<template>
    <div class="my-component">
      <ContentField>
        <div class="container">
          <div class="row justify-content-md-center">
            <div class="col-md-6 col-lg-4">
              <form @submit.prevent="register" class="form-container">
                <div class="mb-3">
                  <label for="username" class="form-label">用户名</label>
                  <input v-model="username" type="text" class="form-control" id="username" placeholder="请输入用户名">
                </div>
                <div class="mb-3">
                  <label for="phone" class="form-label">手机号</label>
                  <input v-model="phone" @input="validatePhoneNumber" type="text" class="form-control" id="phone" placeholder="请输入手机号">
                </div>
                <div class="mb-3">
                  <label for="password" class="form-label">密码</label>
                  <input v-model="password" type="password" class="form-control" id="password" placeholder="请输入密码">
                </div>
                <div class="mb-3">
                  <label for="confirmedPassword" class="form-label">确认密码</label>
                  <input v-model="confirmedPassword" type="password" class="form-control" id="confirmedPassword" placeholder="请再次输入密码">
                </div>
                <div class="error-message">{{ error_message }}</div>
                <button type="submit" class="btn btn-primary" :disabled="!isPhoneValid">提交</button>
              </form>
            </div>
          </div>
        </div>
      </ContentField>
    </div>
  </template>
  
  <script>
  import ContentField from '../../../components/ContentField.vue'
  import { ref } from 'vue'
  import router from '../../../router/index'
  import $ from 'jquery'
  
  export default {
    components: {
      ContentField
    },
    setup() {
      let username = ref('');
      let phone = ref('');
      let password = ref('');
      let confirmedPassword = ref('');
      let error_message = ref('');
  
      const register = () => {
        $.ajax({
          url: "http://127.0.0.1:3000/user/account/register/",
          type: "post",
          data: {
            username: username.value,
            phone: phone.value,
            password: password.value,
            confirmedPassword: confirmedPassword.value,
          },
          success(resp) {
            if (resp.error_message === "success") {
              router.push({ name: "user_account_login" });
            } else {
              error_message.value = resp.error_message;
            }
          },
        });
      }
  
      return {
        username,
        phone,
        password,
        confirmedPassword,
        error_message,
        register,
      }
    },

    computed: {
    isPhoneValid() {
        // 使用正则表达式检查手机号格式
        const phoneRegex = /^[1-9]\d{10}$/;
        return phoneRegex.test(this.phone) && this.phone.length === 11;
      },
    },

    methods: {
      validatePhoneNumber() {
        // 使用正则表达式检查手机号格式
        const phoneRegex = /^[1-9]\d{10}$/;
        if (!phoneRegex.test(this.phone)) {
          this.error_message = '请输入有效的手机号';
        } else {
          this.error_message = '';
        }
      },
    }
  }
  </script>
  
  <style scoped>
  .my-component {
    background-image: url('@/assets/images/image2.png');
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .form-container {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  
  button {
    width: 100%;
    margin-top: 10px;
  }
  
  div.error-message {
    color: red;
    margin-top: 10px;
  }
  </style>
  